<template>
	<div>

		<!-- 搜索 -->
		<div style="width: 100vw;display: flex;height: 8vh;line-height: 8vh;">
			<div style="width: 10%;" @click="back">
				<van-icon name="arrow-left" size="20" />
			</div>
			<div style="width: 80vw;">
				<van-search placeholder="请输入搜索关键词" v-model="val" />
			</div>
			<!-- 消息 -->
			<div style="width: 10%;" @click="search">
				搜索
			</div>
		</div>
		<div v-if="this.isshow">
			<!-- 热搜 -->
			<div style="width: 100vw;display: flex;" v-if="isshow">
			<div style=" width: 90vw;font-weight: bold; font-size: 1.5rem;text-align: left;padding-left: 4vw;">热搜</div>
			<div style="width: 6vw;">
				<van-icon name="delete-o" size="20" @click="clear"/>
			</div>
			</div>
			<div style="width: 95vw;margin-left: 5vw; display: flex;flex-wrap: wrap;">
				<div  @click="chose(index)" v-for="(item,index) in vuex"
					style="line-height: 3.5vh;margin-left: 2vw; margin-top: 2vh; width: 25vw;height: 3.5vh;border-radius: 15px; background-color: #f4f4f4;">
					{{item}}
				</div>
			</div>
		</div>
		<!-- 搜索布局 -->

		<div v-if="searchshop">查无此商品</div>
		
		
		<div v-for="item in list">
			<router-link :to="{path:'/details',query:{goods_id:item.goods_id}}">
				<div style="width: 100vw;height: 15vh;margin-top: 2vh;display: flex;">
					<div style="width: 30vw;height: 15vh;">
						<img :src="url+item.original_img" style="width: 30vw;height: 15vh;">
					</div>

					<div style="width: 70vw;height: 15vh;padding-top: 2vh;text-align: left;">
						<div style="font-size: 1.8rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
							{{item.goods_name}}</div>
						<div style="font-size: 1rem;margin-top: 1vh;">{{item.goods_remark}}</div>
		 			<div style="display: flex;margin-top: 1vh;">
							<div style="font-size: 1.5rem;color: red;width: 50vw;font-weight: bold;">
								￥{{item.shop_price}}</div>
			 			<div style="font-size: 0.5rem;">库存:{{item.store_count}}</div>
						</div>
					</div>
				</div>
		<!-- 	<Details></Details>	 -->
			</router-link>
		</div>
     



	</div>
</template>

<script>
	import Details from '../Details/details.vue'
	export default {
		components:{
			Details
		},
		data() {
			return {
				url: '',
				val: '',
				isshow: true,
				list: [],
				vuex: [],
				getLoc: [],
				searchshop:false
			}
		},
		// 挂载后完毕
		mounted() {


			this.$store.dispatch("user/Home_Url").then(e => {
				// console.log(e,111)
				this.url = e
			})
			if(JSON.parse(localStorage.getItem('history')) ){
				this.vuex=JSON.parse(localStorage.getItem('history')) 
			}
			


		},
		methods: {
			chose(index){
				this.val=this.vuex[index]
				this.search()
			},
			back() {
				this.$router.go(-1)
			},
			clear(){
				// console.log(1)
				localStorage.removeItem('history')
				this.vuex=[]
			},
			search() {
			   // .then返回的是一个promise函数  
				this.$store.dispatch("user/Get_Search", this.val).then(e => {
					console.log(e)
					this.list = e.data.data
					this.isshow=false
					if(this.list.length==0){
						this.searchshop=true
					}else{
						this.searchshop=false
					}
					if(this.val!==''){
						let valu =this.val.trim()
						if(!valu){
							return
						}
							// 返回首次出现的下标  查到
							if (this.vuex.indexOf(valu) === -1) {
								this.vuex.unshift(valu)
								// 截取
								this.vuex = this.vuex.slice(0, 10)
								// 转换为JSON的字符串
								localStorage.setItem('history', JSON.stringify(this.vuex))
							}
						
						
					}
					

				})
		}
	}
	}
</script>

<style>
</style>
